<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>商品动销分析 - 华衣云商ERP系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <style type="text/css">
        .T-box {
            width: 400px;
            padding: 0 20px;
            text-align: left;
        }

        .T-box p {
            position: relative;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .T-box p span {
            display: inline-block;
            padding-right: 15px;
            text-align: right;
            width: 110px;
            line-height: 36px;
            font-size: 14px;
        }

        .T-box p input, .T-box p select {
            width: 160px;
            padding: 0 5px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            border: 1px solid #d3d3d3;
            outline: none;
        }

        .T-box p i {
            padding: 0 10px;
            line-height: 36px;
            font-style: normal;
        }

        .T-box p b {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
            width: 60px;
            height: 36px;
            line-height: 36px;
            background: #c33;
            color: #fff;
            text-align: center;
            font-size: 13px;
            font-weight: normal;
        }

        .T-result {
            margin-bottom: 0;
        }

        .T-result em {
            color: #c33;
            font-style: normal;
        }
    </style>
        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
    
                <li class="layui-this"> <a href="/report/goods_sales_analyse">商品动销</a></li>
                <li> <a href="/report/goods_category_analyse">类目动销</a></li>
<!--                <li> <a href="/zbj/sales_statistics_douyin">拼多多</a></li>-->
<!--                <li > <a href="/report/goods_sales_analyse">抖店</a></li>-->
<!--                <li> <a href="/report/goods_category_analyse">淘宝</a></li>-->
           
            </ul>
        </div>
    <!-- start sp-wrapper -->
    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" method="get" th:action="${searchUrl}">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="goodsNum" placeholder="商品编码" th:value="${goodsNum}" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn">搜索</button>
                        <i>总共：&nbsp;[[${totalSize}]]&nbsp;条记录</i>
                    </div>
                    <a class="layui-btn layui-btn-primary" href="javascript:;" id="export_order">导出excel</a>
                    <div class="layui-inline"></div>

                </div>
            </form>



        </div>
    </fieldset>

    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <th>商品编码</th>
                    <th>商品图片</th>
                    <th>商品名</th>
                    <th>总销量</th>
                    <th>昨天销量</th>
                    <th>3天销量</th>
                    <th>7天销量</th>
                    <th>15天销量</th>
                    <th>30天销量</th>
                    <th>总退货</th>
                    <th>销量明细</th>
                </tr>
                </thead>
                <tbody id="sp-data">
                <tr th:each="item:${lists}">
                    <td><span th:text="${item.number}"></span></td>
                    <td>
                        <img th:src="${item.image}" width="50px" height="50px" />
                    </td>
                    <td><span th:text="${item.name}"></span></td>
                    <td><span th:text="${item.total}"></span></td>
                    <td><span th:text="${item.DAY1}"></span></td>
                    <td><span th:text="${item.DAY3}"></span></td>
                    <td><span th:text="${item.DAY7}"></span></td>
                    <td><span th:text="${item.DAY15}"></span></td>
                    <td><span th:text="${item.DAY30}"></span></td>
                    <td><span th:text="${item.returnTotal}"></span></td>
                    <td>
                        <a href="javascript:;" class="layui-btn-sm layui-btn-primary detail" th:attr="goodsId=${item.goodsId}" >销量明细</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="pages">
                <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
            </div>
        </div>
    </div>



    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">

        $(function () {
            function getDateTime(timestamp) {
                var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear();
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
            }
            //计算天数差的函数，通用
            function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2019-3-12格式
                var aDate, oDate1, oDate2, iDays
                aDate = sDate1.split("-")
                oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为9-25-2017格式
                aDate = sDate2.split("-")
                oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
                iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数
                return iDays
            }
            //导出订单
            $("#export_order").click(function () {
                var startDate = $("#startTime").val();
                var endDate = $("#endTime").val();
                if (startDate == '' || endDate == "") {
                    alert("导出订单一定要选择开始日期和结束日期");
                    return;
                } else {
                    var days = DateDiff(startDate, endDate);
                    if(days > 60){
                        alert("最多只能导出最近60天的数据");
                        return;
                    }
                    // window.location.href = "/order/order_has_send_export?startDate=" + startDate + "&endDate=" + endDate;
                }
            })

           

        });
    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'layer','form'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;
            laydate.render({
                elem: '#startTime',
                elem:'#endTime'
            });


             //
             $(".detail").click(function(){
                var goodsId=$(this).attr("goodsId");
                layer.open({
                        type: 2,
                        title: '查看规格销售明细',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['800px', '650px'],
                        content: '/report/goods_spec_sales_analyse?goodsId=' + goodsId //iframe的url
                    });
            })//end


        });
    </script>
</div>
</body>
<html>
